<script setup lang="ts">
import { reactive, ref, computed } from "vue";
import { HxqAgreement } from "vue-mobile-hxq";
import { apiBaseCol } from "assets/js/constant.js";
import agreement from "./components/agreement.vue";

// 同意协议书
function getCheckValues(check: boolean): void {
  console.log(check);
  isdisabled.value = !isdisabled.value;
}
const isdisabled = ref(true);

function lookAgreement() {
  console.log("查看协议");
}

const dataSource = reactive([
  {
    name: "isdisabled",
    param: "boolean",
    desc: "是否禁用",
  },
]);

const eventSource = reactive([
  {
    name: "getCheckValues",
    param: " ",
    desc: "获取是否同意的状态",
  },
  {
    name: "click",
    param: " ",
    desc: "点击时触发",
  },
]);
</script>
<template>
  <div class="container">
    <div class="left-box">
      <div class="public-flex-box">
        <div class="public-title-bold">介绍</div>
        <div class="public-content-text">是否同意协议书和查看协议。</div>
      </div>
      <div class="public-flex-box">
        <div class="public-title-bold">引入</div>

        <pre class="public-content-code">
        <code
          class="language-css"
        >
    import { HxqCheckBox } from "vue-mobile-hxq";
        </code></pre>
      </div>
      <div class="public-outside-title">代码展示</div>
      <div class="public-flex-box">
        <div class="public-title-bold">基本用法</div>

        <pre class="public-content-code">
        <code
          id="code-2"
          class="language-markup line-numbers"
          style="text-align: left"
        >
    &lt;hxq-agreement :isdisabled="isdisabled" @getCheckValues="getCheckValues">
      &lt;span @click.stop="lookAgreement">《协议名称》 &lt;/span>
    &lt;/hxq-agreement>
        </code></pre>
      </div>
      <div class="public-flex-box">
        <div class="public-title-bold">基本参数</div>
        <a-table
          :dataSource="dataSource"
          :columns="apiBaseCol"
          :pagination="false"
        />
        <div class="public-title-bold">事件</div>
        <a-table
          :dataSource="eventSource"
          :columns="apiBaseCol"
          :pagination="false"
        />
      </div>
    </div>
    <div class="right-box">
      <agreement></agreement>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;

  .left-box {
    width: calc(72% - 10px);
    height: 100%;
    overflow-y: auto;
  }
  .right-box {
    width: calc(28% - 10px);
    height: 100%;
    background-color: #fff;
    border-radius: 24px;
  }
}
.van-checkbox-group {
  display: flex;
  justify-content: space-between;
  ::v-deep .van-checkbox {
    height: 48px;
    line-height: 48px;
    // border-bottom: 1px solid #eeeeee;
  }
  ::v-deep .van-checkbox:last-child {
    border-bottom: none;
  }
}
</style>
